<template>
  <div class="main">
    <a-layout>
      <a-layout-sider class="layout-sider" v-model:collapsed="collapsed" :trigger="null" collapsible>
        <img class="logo" :src="logo" />
        <Menu />
      </a-layout-sider>
      <a-layout>
        <a-layout-header class="layout-header">
          <Header />
        </a-layout-header>
        <TagNav ref="tagNav"></TagNav>
        <a-layout-content class="content">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import Menu from './components/menu';
import Header from './components/header'
import TagNav from './components/tagNav'
import { defineComponent, ref } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  components: {
    Menu,
    Header,
    TagNav
  },

  setup() {
    return {}
  },

  data() {
    return {
      logo:require('static/images/logo.png')
    }
  },

  computed:{
    collapsed(){
      return this.$store.state.common.collapsed
    }
  }
});
</script>

<style scoped>
  .main .layout-sider {
    height: 100vh;
    overflow: hidden;
	}
  .main .logo{
    width: 200px;
    height: 50px;
    margin: auto;
  }
  .main .layout-header{
    background-color: #ffffff;
    padding: 0;
  }
  .main .content{
    max-height: calc(100vh - 104px);
    overflow-y: auto;
  }
</style>